{include file="public/header-static"/}
{include file="public/sidebar"/}

<div id="main">
    {include file="public/header"/}
    <main class="main-content">
        <div class="container">
            <div class="page-header">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                    </ol>
                </nav>
            </div>
            <div class="row">
                <div class="col-md-12">

                    <div class="card">
                        <div style="display: flex;justify-content: space-between;padding: 19px 25px;">
                            <i style="font-size: 22px; color: #457BFFFF;font-weight: 600;">活动详情</i>
                        </div>
                        <div class="card-body">
                            <div class="form-group row blueLabel">
                                <input type="hidden" name="id" class="form-control" value="{$info.id}">
                                <label for="" class="col-sm-2 col-form-label ">活动主题</label>
                                <div class="col-sm-8">
                                    <input type="text" name="title" class="form-control" placeholder="请输入活动主题" value="{$info.title}">
                                </div>
                            </div>

                            <div class="form-group row blueLabel">
                                <label for="" class="col-sm-2 col-form-label">活动类型</label>
                                <div class="col-sm-4">
                                    <select name="type" id="type" class="form-control">
                                        <option value="">请选择活动类型</option>
                                        <option value="1" {if $info.type == 1}selected{/if}>线上</option>
                                        <option value="2" {if $info.type == 2}selected{/if}>线下</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group row blueLabel">
                                <label for="" class="col-sm-2 col-form-label">活动地区</label>
                                <div class="col-sm-8" style="display: flex;">
                                    <input type="text" class="form-control" name="province" value="{$info.province}" style="width:33%;margin-right: 15px;">
                                    <input type="text" class="form-control" name="city" value="{$info.city}" style="width:33%;margin-right: 15px;">
                                    <input type="text" class="form-control" name="area" value="{$info.area}" style="width:33%;">
                                </div>
                            </div>

                            <div class="form-group row blueLabel">
                                <label for="" class="col-sm-2 col-form-label">详细地址</label>
                                <div class="col-sm-8" style="display: flex;">
                                    <input type="text" name="address" class="form-control" placeholder="详细地址" value="{$info.address}">
                                </div>
                            </div>

                            <div class="form-group row blueLabel">
                                <label for="" class="col-sm-2 col-form-label">开始/结束时间</label>
                                <div class="col-sm-8" style="display: flex;align-items: center;">
                                    <input name="start_time" type="text" autocomplete="off" id="startDate"
                                           class="layui-input"
                                           placeholder="开始日期" value="{$info.start_time}">
                                    <span style="margin:0 10px">-</span>
                                    <input name="end_time" type="text" autocomplete="off" id="endDate"
                                           class="layui-input"
                                           placeholder="结束日期" value="{$info.end_time}">
                                </div>
                            </div>

                            <div class="form-group row blueLabel blueLabel2">
                                <label class="col-sm-2 col-form-label">预算</label>
                                <div class="col-sm-4">
                                    <input type="text" name="budget" class="form-control" placeholder="预算" value="{$info.budget}">
                                </div>
                            </div>

                            <div class="form-group row blueLabel blueLabel2">
                                <label class="col-sm-2 col-form-label">经办人</label>
                                <div class="col-sm-4">
                                    <input type="text" name="manager" class="form-control" placeholder="经办人" value="{$info.manager}">
                                </div>
                            </div>

                            <div class="form-group row blueLabel">
                                <label class="col-sm-2 col-form-label">描述</label>
                                <div class="col-sm-8">
                                    <textarea class="custom_text form-control" placeholder="描述"
                                              name="desc">{$info.desc}</textarea>
                                </div>
                            </div>

                            <div class="form-group row blueLabel">
                                <label class="col-sm-2 col-form-label">上传文件</label>

                                <div class="col-sm-8">
                                    <!--                                    <div class="col-sm-8" style="flex: auto;max-width: 100%;">-->
                                    <input type="hidden" class="form-control files" name="files" required=""
                                           aria-required="true" value="{$info.filesPath}">

                                    <div class="layui-upload-list">
                                        <table class="layui-table" style="table-layout:fixed;">
                                            <thead>
                                            <tr>
                                                <th width="70%">文件名</th>
                                                <th>进度条</th>
                                            </tr>
                                            </thead>
                                            <tbody id="the_2655">
                                            {php}
                                                if ($info['marketingPath']) {

                                                foreach ($info['marketingPath'] as $v) {

                                            {/php}
                                                <tr>
                                                    <td width="20%">{$v['basename']}</td>
                                                    <td class="rate" width="40%">
                                                        <div class="layui-form-item1">
                                                            <div class="layui-progress layui-progress-big"
                                                                 lay-filter="rate" lay-showPercent="true">
                                                                <div id="rate" class="layui-progress-bar"
                                                                     lay-percent="100.00%"
                                                                     style="width: 100%;text-align: left;">
                                                                    <span class="layui-progress-text"></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            {php}
                                                } }
                                            {/php}
                                            </tbody>
                                        </table>
                                    </div>

                                </div>
                            </div>

                            <button type="button" id="return" class="btn btn-secondary">返回</button>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </main>

    {include file="public/footer"/}
    <script>
        //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
        layui.use('element', function () {
            var element = layui.element,
                $ = layui.jquery;
            // element.progress('rate', '50%');
        });

        $('#return').click(function () {
            window.location.href = '{:url("/marketing/index")}';
        });
    </script>


</div>

<style>
    .blueLabel {
        font-weight: 600;
        color: #000000FF;
        position: relative;
    }

    .blueLabel:before {
        content: '';
        position: absolute;
        top: 0;
        left: 1%;
        display: block;
        width: 26px;
        height: 26px;
        border-radius: 4px;
        background-color: #ECEFFFFF;
    }

    .orangeLabel {
        font-weight: 600;
        color: #000000FF;
        position: relative;
    }

    .orangeLabel:before {
        content: '';
        position: absolute;
        top: 0;
        left: 1%;
        display: block;
        width: 26px;
        height: 26px;
        border-radius: 4px;
        background-color: #FEE0D3FF;
    }

    .bottom {
        display: grid;
        place-items: center;
        margin-bottom: 20px;
    }

    .positionBox1, .positionBox2 {
        position: relative;
    }

    .positionBox2 .pullDown2 {
        position: absolute;
        left: 70%;
        bottom: -90%;
        transform: rotate(180deg);
        cursor: pointer;
    }

    .positionBox1 .pullDown1 {
        position: absolute;
        right: -70%;
        bottom: -10%;
        transform: rotate(180deg);
        cursor: pointer;
    }

    .pullDown1:before, .pullDown1:after, .pullDown2:before, .pullDown2:after {
        position: absolute;
        content: '';
        border-top: 7px transparent dashed;
        border-left: 7px transparent dashed;
        border-right: 7px transparent dashed;
        border-bottom: 7px #fff solid;
    }

    .pullDown1:before, .pullDown2:before {
        border-bottom: 7px #5C5F66FF solid;
    }

    .pullDown1:after, .pullDown2:after {
        top: 2px;
        border-bottom: 7px #fff solid;
    }
</style>